<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
        <link rel="preload" href="/node_modules/@perspective-dev/server/dist/wasm/perspective-server.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
        <link rel="preload" href="/node_modules/@perspective-dev/viewer/dist/wasm/perspective-viewer.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
        <link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@perspective-dev/viewer/dist/css/themes.css" />
        <script type="module">
            import "/node_modules/@perspective-dev/viewer/dist/cdn/perspective-viewer.js";
            import "/node_modules/@perspective-dev/viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js";
            import "/node_modules/@perspective-dev/viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js";

            import { worker } from "/node_modules/@perspective-dev/client/dist/cdn/perspective.js";

            const WORKER = await worker();
            const REQ = fetch("https://api.covidtracking.com/v1/states/daily.csv");
            const LAYOUT = {
                plugin: "Y Area",
                plugin_config: {
                    legend: {
                        height: "106px",
                        left: "100px",
                        top: "25px",
                        width: "",
                    },
                },
                settings: true,
                group_by: ['Parsed "date" bucket by week'],
                split_by: ["state"],
                columns: ["deathIncrease"],
                filter: [],
                sort: [["deathIncrease", "col desc"]],
                expressions: {
                    [`Parsed "date" bucket by week`]: `var year := integer(floor("date" / 10000));
var month := integer(floor("date" / 100)) - year * 100;
var day := integer("date" % 100);
bucket(date(year, month, day), \'W\')`,
                },
                aggregates: {},
            };

            const resp = await REQ;
            const csv = await resp.text();
            const el = document.getElementsByTagName("perspective-viewer")[0];
            const table = WORKER.table(csv);
            el.load(table);
            el.restore(LAYOUT);
        </script>
        <style>
            perspective-viewer {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <perspective-viewer editable> </perspective-viewer>
    </body>
</html>
